<template>
  <div class="new_music">
       <div  class="music_top">
         热门新歌
       </div>
       <div class="hot_list" v-for="(m,index) in getnewmusic" :key="index">
             <img :src="`${m.picUrl}?param=230y230`" alt="" @mouseenter="ishow(m.name)" @mouseleave="ishow('')">
             <div class="iconfont icon-bofang" v-show="isshows==m.name" @mouseenter="ishow(m.name)" @mouseleave="ishow('')"></div>
             <i >{{m.name}}</i>
               <div>  <span v-for="(mi,indexs) in m.artists" :key="mi.id" @click="gosongstwo(mi.id)">{{mi.name}}  <span>{{indexs==m.artists.length-1?'':'/'}}</span></span></div>
       </div>
     <div  class="music_cate">
         全部新歌
         <i v-for="(m,index) in jsol" :key='index' @click="cates(index)">{{m}}</i>
       </div>
          <div class="hot_list" v-for="(m) in getallmusic.albums" :key="m.id">
             <img :src="`${m.picUrl}?param=230y230`" alt="" @mouseenter="ishow(m.name)" @mouseleave="ishow('')">
             <div class="iconfont icon-bofang" v-show="isshows==m.name" @mouseenter="ishow(m.name)" @mouseleave="ishow('')"></div>
             <i >{{m.name}}</i>
           <div>  <span v-for="(mi,indexs) in m.artists" :key="mi.id" @click="gosongstwo(mi.id)">{{mi.name}}  <span>{{indexs==m.artists.length-1?'':'/'}}</span></span></div>
            
       </div>
       <div class="fenye">
             <frpage :total='getallmusic.total'  :offset=offset  :numbers='10'  :continues='5' @substr='substr' @add='add' @numarrive='numarrive' />
  </div>
       </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
   return{
       isshows:'',
        jsol:{
                ALL:'全部',ZH:'华语',EA:'欧美',KR:'韩国',JP:'日本'
        },
       offset: 1,
       areas:'ALL'
   }
    },
    methods:{
         ishow(m){
      this.isshows=m
         },
           substr(){
         
               this.offset--
             this.$store.dispatch('getallmusic',{m:this.areas,mi:this.offset*10})
       },
           add(){
               this.offset++
             this.$store.dispatch('getallmusic',{m:this.areas,mi:this.offset*10})
       },
       numarrive(m){
         this.offset=m
             this.$store.dispatch('getallmusic',{m:this.areas,mi:this.offset*10})
       },
       cates(m){
            this.areas=m
            console.log(this.areas);
             this.$store.dispatch('getallmusic',{m:this.areas,mi:this.offset*10})
       },
       gosongstwo(m){
          this.$router.push({name:'songstwo',params:{id:m}})
       }
    },
  mounted(){
      this.$store.dispatch('getnewmusic')
      this.$store.dispatch('getallmusic',{m:this.areas,mi:this.offset*10})
  },
  computed:{
      ...mapState({
          getnewmusic:(state)=>{
              return state.user.getnewmusic
          },
          getallmusic:(state)=>{
              return state.user.getallmusic
          }
      })
  }
}
</script>

<style lang='less' scoped>
 .new_music{
      margin: 20px 135px;
      margin-right: 20px;
    
        .fenye{
             float: right;
             height: 20px;
         margin-top: 50px;
         margin-right: 35px;
      padding-bottom: 100px;
             
         }
         
     .music_top{
         font-size: 20px;
         font-weight: bold;
      
     }
     .music_cate{
         float: left;
         width: 100%;
         font-size: 20px;
         margin-top: 20px;
            font-weight: bold;
         i{
             font-size: 16px;
             margin-left: 10px;
             cursor: pointer;
              &.active{
                  color: skyblue;
              }
         }
         i:hover{
             color: skyblue;
         }
     }
     .hot_list{
         position: relative;
         float: left;
         margin-right: 45px;
         margin-top: 10px;
         padding-bottom: 40px;
         width: 230px;
         height: 230px;
         
         .iconfont{
             position: absolute;
             cursor: pointer;
             top: 90px;
             left: 90px;
             font-size: 50px;
             color: #fff;
         }
         img{
             cursor: pointer;
             width: 230px;
             height: 230px;
         }
         i{ 
                display: block;  //隐藏字体要加格式，不能是inline
                width: 140px;
                
               cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                 font-size: 16px;
             
         }
         
         div{
            
               width: 140px;
           
         
             font-size: 14px;
              white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                 span{
                      color: gray;
             cursor: pointer;
               font-size: 14px;
               span{
                   margin: 0 3px;
               }
                 }
         }
       
         i:hover{
             text-decoration: underline;
            
             color: skyblue;
         }
         span:hover{
             text-decoration: underline;
         }
            //  i{
            //              display: inline-block;
            //            font-size: 12px;
            //           width: 140px;
            //           text-align: center;
            //           margin-top: 10px;
            //           overflow: hidden;
            //           text-overflow: ellipsis;
            //           white-space: nowrap;
            //          }
     }

 }
</style>